<template>
    <div class="body">
        <div class="wrap">
            <div class="logo"></div>
            <div class="login">
                <div class="login-in">登录百度糯米</div>
                <div class="tel">
                    <span class="iconfont">&#xe600;</span>
                    <el-input v-model="username" prefix-icon="&#xe600;" placeholder="手机/邮箱/用户名/糯米账号">
                    </el-input>
                    <span class="iconfont">&#xe621;</span>
                    <el-input type="password" v-model="password" prefix-icon="&#xe600;" placeholder="密码">
                    </el-input>
                </div>
                <div class="bottom">
                    <el-checkbox  v-model="checked">下次自动登录</el-checkbox>
                    <span>登录遇到问题</span>
                </div>
                <el-button @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import '../../../mock/index'
import { loginRes, loginGetInfo } from '../../../api/user'
import { mapActions } from 'vuex'
import Cookies from 'js-cookie'
export default {
    data() {
        return {
            checked: '',
            username: '',
            password: ''
        }
    },
    methods: {
        ...mapActions(['setInfo']),
        login() {
            loginRes({user_name: this.username, password: this.password}).then((res) => {
                // eslint-disable-next-line no-restricted-syntax
                const { data } = res
                const { code, data: {token}, msg} = data
                if (code === 0) {
                    Cookies.set('token',token)
                    loginGetInfo().then(res => {
                        const { data } = res
                        const { code, data: {name, email}, msg} = data
                        if (code === 0) {
                            this.setInfo(name)
                            this.$router.push('/')
                        }
                    })
                } else {
                    // eslint-disable-next-line no-restricted-syntax
                    console.error(msg)
                }
            })
        }
    },
    computed: {
       
    }
}
</script>


<style lang="stylus">
     .bottom .el-checkbox .el-checkbox__label
         font-size: 12px;  
</style>



<style lang="stylus" scoped>
    .body
        width: 1519px;
        height: 440px;
        border-bottom: 4px solid #ccc;
        background: #CCFFFF;
        .wrap
            width: 980px;
            height: 440px;
            margin: 0 auto; 
            .logo
                float: left;
                margin-top: 49px;
                width: 623px;
                height: 337px;
                background: url(//gss0.bdstatic.com/8r1VfDn9KggZnd_b8IqT0jB-xx1xbK/static/user/img/login-logo_30a0915.png) no-repeat;
            .login
                margin-top: 49px;
                padding: 20px 14px;
                width: 279px;
                min-height: 247px;
                border: 1px solid #eee;
                background: #fff;
                float: right;
                .login-in
                    height: 25px;
                    line-height: 25px;
                    font-size: 17px;
                    font-weight: 700;
                    color: #666;
                .tel
                    margin-top: 20px;
                    .iconfont
                        position: relative;
                        top: 30px; 
                        left: 6px;
                        z-index: 1000;
                        color: #ccc;
                        .el-input
                            color: #ccc;
                .bottom
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    span
                        font-size:  12px;
                        cursor: pointer;
                        &:hover
                            color: #409EFF;
                            text-decoration: underline;
                .el-button
                    width: 280px;
                    height: 40px;
                    margin-top: 10px;

</style>


